<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box1 {
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
        }

        #box {
            width: 500px;
            height: 200px;
            background-color: #bfa;
        }

        #span1 {
            background-color: yellow;
        }

        #outter {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        #middle {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        #inner {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        #drag {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
        }

        #scroll {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
        }

        #move {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
        }
        #keyToMove {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute; 
        }
    </style>
    <script type="text/javascript">
        window.onload = () => {
            /*
            事件 处罚一层一层 依次上传
            事件冒泡
            事件捕获
            */
            var box = document.getElementById("box");
            var span1 = document.getElementById("span1");
            var box1 = document.getElementById("box1");
            span1.onclick = function () {
                alert("span1");
                span1.style.backgroundColor = "red";
            }
            box1.onclick = function () {
                alert("box1");
                box1.style.backgroundColor = "green";
            }
            box.onclick = function () {
                alert("box");
                box.style.backgroundColor = "blue";
            }

            let box2 = document.getElementById("box2");
            console.log(box2);
            let button = box2.getElementsByTagName("button")[0];
            button.onclick = function () {
                let li = document.createElement("li");
                li.innerHTML = "<a href='javascript:;'>5</a>";
                let u1 = document.getElementById("u1");
                u1.appendChild(li);
            }

            let u1 = document.getElementById("u1");
            // 事件委托
            u1.onclick = function (event) {
                let target = event.target; // 事件源
                if (target.nodeName == "A") {
                    console.log(target.innerHTML);
                }
            }

            let box3 = document.getElementById("box3");
            let click = document.getElementById("click");
            click.onclick = function () {
                alert("click");
            }
            // 事件绑定 
            //addEventListener 事件绑定
            // 事件绑定的三个参数
            // 1.事件类型
            // 2.事件处理函数
            // 3.是否捕获
            console.log("------------addEventListener------------");
            click.addEventListener("click", function () {
                alert("click addEventListener 1");
            }, false);

            click.addEventListener("click", function () {
                alert("click addEventListener 2");
            }, false);

            // attachEvent 事件绑定
            // 事件绑定的两个参数
            // 1.事件类型
            // 2.事件处理函数
            // IE8及以下
            //console.log("------------attachEvent------------");
            /*
            click.attachEvent("onclick", function () {
                alert("click attachEvent 1");
            });

            click.attachEvent("onclick", function () {
                alert("click attachEvent 2");
            });
            */
            // 事件解绑
            // removeEventListener 事件解绑
            // 事件解绑的三个参数
            // 1.事件类型
            // 2.事件处理函数
            // 3.是否捕获
            console.log("------------removeEventListener------------");
            let click1 = function () {
                alert("click removeEventListener 1");
            }
            let click2 = function () {
                alert("click removeEventListener 2");
            }
            click.addEventListener("click", click1, false);
            click.addEventListener("click", click2, false);
            click.removeEventListener("click", click1, false);
            click.removeEventListener("click", click2, false);

            function bind(obj, eventStr, callback) {
                if (obj.addEventListener) {
                    obj.addEventListener(eventStr, callback, false);
                } else {
                    obj.attachEvent("on" + eventStr, callback.call(obj));
                }
            }

            function unbind(obj, eventStr, callback) {
                if (obj.removeEventListener) {
                    obj.removeEventListener(eventStr, callback, false);
                } else {
                    obj.detachEvent("on" + eventStr, callback);
                }
            }

            let outter = document.getElementById("outter");
            let middle = document.getElementById("middle");
            let inner = document.getElementById("inner");
            outter.addEventListener("click", function () {
                console.log("outter");
            }, false);
            middle.addEventListener("click", function () {
                console.log("middle");
            }, false);
            inner.addEventListener("click", function () {
                console.log("inner");
            }, false);

            let drag = document.getElementById("drag");

            function dragMove(obj) {
                obj.onmousedown = function (event) {
                    event = event || window.event;
                    obj.setCapture && obj.setCapture();
                    let oX = event.pageX - obj.offsetLeft;
                    let oY = event.pageY - obj.offsetTop;
                    document.onmousemove = function (event) {
                        if (!event) {
                            event = window.event;
                        }
                        obj.style.left = event.pageX - oX + "px";
                        obj.style.top = event.pageY - oY + "px";
                    }
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        obj.releaseCapture && obj.releaseCapture();
                    }
                    return false; // 阻止默认事件 event.preventDefault(); 
                }
            }

            dragMove(drag);


            let scroll = document.getElementById("scroll");
            scroll.onmousewheel = function (event) {
                event = event || window.event;
                event.wheelDelta > 0 ? scroll.style.width = scroll.offsetWidth - 10 + "px" : scroll.style.width = scroll.offsetWidth + 10 + "px";
                event.preventDefault && event.preventDefault(); // 阻止默认事件firefox
                return false;
            }

            document.onkeydown = function (event) {
                event = event || window.event;
                console.log(event.keyCode);

            }
            // 键盘移动
            // 65 A
            // 87 W
            // 68 D
            // 83 S

            function keyMove(obj) {
                document.onkeydown = function (event) {
                    event = event || window.event;
                    let speed = 10;
                    switch (event.keyCode) {
                        case 65:
                            obj.style.left = obj.offsetLeft - speed + "px";
                            break;
                        case 87:
                            obj.style.top = obj.offsetTop - speed + "px";
                            break;
                        case 68:
                            obj.style.left = obj.offsetLeft + speed + "px";
                            break;
                        case 83:
                            obj.style.top = obj.offsetTop + speed + "px";
                            break;
                    }
                }
            }
            keyMove(scroll);

            let moveCode;
            let move = document.getElementById("move");
            //optimized keyMove
            setInterval(function () {
                let speed = 1;
                switch (moveCode) {
                    case 65:
                    move.style.left = move.offsetLeft - speed + "px";
                        break;
                    case 87:
                    move.style.top = move.offsetTop - speed + "px";
                        break;
                    case 68:
                    move.style.left = move.offsetLeft + speed + "px";
                        break;
                    case 83:
                        move.style.top = move.offsetTop + speed + "px";
                        break;
                }
            }, 10);

            document.onkeydown = function (event) {
                event = event || window.event;
                moveCode = event.keyCode;
            }

            document.onkeyup = function (event) {
                event = event || window.event;
                moveCode = null;
            }

            setTimeout(function () {
                move.remove();
            }, 10000);

        }
    </script>
</head>

<body>
    <div id="box">
        <div id="box1">
            <p>偶是box</p>
            <span id="span1">偶是span</span>
        </div>
    </div>
    <div id="box2">
        <button id="add">
            添加
        </button>
        <ul id="u1">
            <li><a href="javascript:;">1</a></li>
            <li><a href="javascript:;">2</a></li>
            <li><a href="javascript:;">3</a></li>
            <li><a href="javascript:;">4</a></li>
        </ul>
    </div>

    <div id="box3">
        <button id="click">btn</button>
    </div>

    <div id="outter">
        <div id="middle">
            <div id="inner">
            </div>
        </div>
    </div>

    <div id="drag"></div>

    <div id="scroll"></div>

    <div id="move"></div>

    <div id="keyToMove"></div>

    <input type="text" id="text" />

</body>

</html>